<template>
    <view class="canvas-box">
        <canvas class="canvas" :style="{ width: `${canvasData.image_Width}px;`, height: `${canvasData.image_Height}px;` }"
            canvas-id="canvasID"></canvas>
        <view class="footer">
            <view class="preservationBtn" @click="saveImage">保存到相册</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            imgUrl: '',
            statusBarHeight: 0,
            avatar: '/static/test.png', //头像地址
            erweima: '/static/test.png',//二维码
            canvasData: {
                image_Width: 0,
                image_Height: 0
            }
        }
    },
    onLoad() {
        let ctx = uni.createCanvasContext('canvasID', this);
        uni.getImageInfo({
            src: 'https://img0.baidu.com/it/u=3269595841,4171123021&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500', //网络图片用来做背景
            success: (res) => {
                // console.log(res);
                this.canvasData.image_Width = res.width
                this.canvasData.image_Height = res.height
                ctx.save()
                ctx.drawImage(res.path, 0, 0, this.canvasData.image_Width, this.canvasData.image_Height)
                ctx.draw(true)
                ctx.save()
                this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像
                ctx.setFontSize(18)
                ctx.setFillStyle("#ffffff")
                ctx.fillText('哆啦A梦没口袋', 98, 65)
                ctx.font = '20px normal'
                ctx.setFillStyle("#09CFB1")
                ctx.fillText('伴我同行', 30, 122)
                ctx.setFillStyle("#09CFB1")
                ctx.fillText('一路前行', 60, 150)
                ctx.fillStyle = "#2C405A";
                ctx.fillRect(154, 358, 96, 96);
                ctx.drawImage(this.erweima, 154, 356, 96, 96) //二维码
                ctx.draw(true, setTimeout(() => {
                    uni.canvasToTempFilePath({ //将canvas生成图片
                        x: 0,
                        y: 0,
                        width: 281,
                        height: 500,
                        destWidth: 281, //截取canvas的宽度
                        destHeight: 500, //截取canvas的高度
                        canvasId: 'canvasID',
                        success: (res) => {
                            console.log('res.tempFilePath==========', res.tempFilePath)
                            this.imgUrl = res.tempFilePath
                        },
                        fail: (err) => {
                            console.log(err)
                        }
                    })
                }, 500))
            },
        })
    },
    methods: {
        //点击保存到相册
        saveImage() {
            var _this = this;
            uni.saveImageToPhotosAlbum({
                filePath: _this.imgUrl,
                success() {
                    uni.showToast({
                        title: "图片已保存图片到相册",
                        icon: 'none',
                        duration: 2000
                    })
                },
                fail() {
                    uni.hideLoading()
                    uni.showModal({
                        content: '检测到您没打开获取信息功能权限，是否去设置打开？',
                        confirmText: "确认",
                        cancelText: '取消',
                        success: (res) => {
                            if (res.confirm) {
                                uni.openSetting({
                                    success: (res) => {
                                        console.log(res);
                                        uni.showToast({
                                            title: "请重新点击分享保存图片～",
                                            icon: "none"
                                        });
                                    }
                                })
                            } else {
                                uni.showToast({
                                    title: "保存失败，请打开权限功能重试",
                                    icon: "none"
                                });
                            }
                        }
                    })
                }
            })
        },
        // 绘制圆形头像
        drawCircular(ctx, url, x, y, width, height) {
            //画圆形头像
            let avatarurl_width = width;
            let avatarurl_heigth = height;
            let avatarurl_x = x;
            let avatarurl_y = y;
            ctx.save(); //先保存状态，已便于画完园再用
            ctx.beginPath(); //开始绘制
            ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
                .PI * 2, false);
            ctx.setFillStyle("#FFFFFF")
            ctx.fill() //保证图片无bug填充
            ctx.clip(); //剪切
            ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
            ctx.restore();
        },
    }
}
</script>
<style lang="scss">
.canvas-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: #2C405A;

    image {
        margin-top: 40rpx;
    }

    .canvas {
        margin-top: 40rpx;
    }

    .footer {
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        justify-content: center;

        .preservationBtn {
            margin-bottom: 40rpx;
            border: 1rpx solid #ffffff;
            color: #ffffff;
            display: flex;
            align-items: center;
            padding: 20rpx 40rpx;
            text-align: center;
            font-size: 30rpx;
            border-radius: 40rpx;
        }
    }
}
</style>